<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name"
                                       placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="passwd" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="passwd"
                                       placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="phone"
                                       placeholder="请输入电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="age"
                                       placeholder="请输入年龄">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-block btn btn-info" data-dismiss="modal">
                    	关闭
                    </button>
                    <button type="button" class="btn-block btn btn-info" id="dis">
                    	提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <form>
        <input type="text" name="查询" id="a1">
        <input type="button" value="查询" id="a2">
    </form>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        +
    </button>
    <div>
        <table>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>密码</th>
                <th>号码</th>
                <th>年龄</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
        </table>
        <ul class="pagination">
            <li>当前页:<i id="index" class="b"></i>总页:<i id="total" class="b"></i></li>
            <li>每页的数量:
                <select id="sel">
                    <option>10</option>
                    <option>20</option>
                    <option>30</option>
                    <option>40</option>
                </select>
            </li>
            <li><button onclick="query(1)">首页</button></li>
            <li><button onclick="queryPre()">上一页</button></li>
            <li><button onclick="queryText()">下一页</button></li>
            <li><button onclick="queryTotal()">尾页</button></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(function(){
            $("#close").click(function(){
                $("#wid").css('display','none');
                $("#names").prop('disabled',false);
                $("#btn").prop('disabled',false);
                $("#query").prop('disabled',false);
            });
            $("#close1").click(function(){
                $("#wid").css('display','none');
                $("#names").prop('disabled',false);
                $("#btn").prop('disabled',false);
                $("#query").prop('disabled',false);
            });
            $("#btn").click(function(){
                $("#wid").css('display','block');
                $("#names").attr('disabled','disabled');
                $("#btn").attr('disabled','disabled');
                $("#query").attr('disabled','disabled');

            });
            $("#dis").click(function(){
                $("#names").prop('disabled',false);
                $("#btn").prop('disabled',false);
                $("#query").prop('disabled',false);
                var action =$("#form").attr("action");
                if(action == '/add.do'){
                    add();
                }else{
                    alterAll();
                }
            });
            $("#sel").change(function(){
                var pageSize=$("#sel").val();
                query(1,pageSize);
            });
        });
        function add(){
            alert($("#form").serialize());
            var name =$("#name").val().trim();
            if(name == "" || name.length == 0){
                alert("用户名不为空"); 
                return;
            }else if(name.length<2 || name.length>= 5){
                alert("用户名长度只能为2~4");
                return;
            }
            var passwd = $("#password").val().trim();
            if(passwd == "" || passwd.length == 0){
                alert("密码不为空");
                return;
            }else if(passwd.length <6){
                alert("密码长度要大于6");
                return;
            }
            var phone = $("#phone").val().trim();
            if(phone == "" || phone.length == 0){
                alert("手机号不为空");
                return;
            }else if(phone.length != 11){
                alert("手机号长度要为11位");
                return;
            }
            var age = $("#age").val().trim();
            if(age == "" || age.length == 0){
                alert("年龄不为空");
                return;
            }
            $.get("http://127.0.0.1:8080/add.do", $("#form").serialize(), function(data){
                alert(data);
                debugger;
                if(data == 'ok'){
                    alert(data);
                    query(1);
                }else{
                    alert(data);
                    query(1);
                }
            },'json');
        }

        function del(id){
            $.get("http://127.0.0.1:8080/del.do", "id="+id, function(data){
                alert(data);
                debugger
                if(data == 'ok'){
                    alert(data);
                    query();
                }else{
                    alert(data);
                    query();
                }
            },'json');
        }
        function alter(id,name,passwd, phone,age){
            $("#wid").css('display','block');
            $("#names").attr('disabled','disabled');
            $("#btn").attr('disabled','disabled');
            $("#query").attr('disabled','disabled');
            $("#id").val(id);
            $("#name").val(name);
            $("#passwd").val(passwd);
            $("#phone").val(phone);
            $("#age").vale(age);
            $("#form").attr("action","/alter.do");
        }
        function alterAll(){
            $.get("http://127.0.0.1:8080/alter.do", $("#form").serialize(), function(data){
                if(data == 'ok'){
                    alert("修改成功");
                    query();
                }else{
                    alert("修改失败");
                    query();
                }
            },'json');
        }
        function queryPre(){
            var index =$("#index").text();
            query(index-1);
        }
        function queryText(){
            var index =$("#index").text();
            query(index+1);
        }
        function queryTotal(){
            var total =$("#total").text();
            query(total);
        }
        function queryName(){
            query(1);
        }
        function query(pageIndex,pageSize){
            $("#wid").css('display','none');
            if(!pageIndex){
                pageIndex = 1;
            }
            if(!pageSize){
                pageSize = 20;
            }
            var names = $("#names").val();
            //var pageSize=0;
            $.get("http://127.0.0.1:8080/query.do","name="+names+"&pageIndex="+pageIndex+"&pageSize="+pageSize,function(msg){
                var alls = JSON.parse(msg);
                var all =alls.list;
                alert(all.length);
                var pageIndex=alls.pageIndex;
                $("#index").text(pageIndex);
                var total = alls.total;
                $("#total").text(total);
                $("tr[type='data']").remove();
                $("#tr").empty();
                for(var i=0;i<all.length;i++){
                    var html="<td><button class='btn btn-info' id='del'onclick='del("+all[i].id+")'>删除</button></td><td ><input type='button' value='修改' class='btn-block btn btn-info' id='btn1' onclick=\"alter('"+all[i].name+"','"+all[i].phone+"','"+all[i].age+"','"+all[i].id+"')\"/></td>";
                    $("#table").append("<tr type='data'><td id='id'>"+all[i].id+"</td><td>"+all[i].name+"</td><td>"+all[i].phone+"</td><td>"+all[i].age+"</td>"+html+"</tr>");
                }
            })
        }
        $(function(){
            query(1,20);
        });
    </script>
</body>
<style>
    table{
        width: 61%;
    }
    th{
        height: 50px;
        background-color: springgreen;
    }
    td{
        height: 30px;
        background-color: aqua;
    }
    #a1 {
        width: 50%;
        height: 30px;
    }
    #a2 {
        width: 5%;
        height: 36px;
        background-color: aquamarine;
    }
</style>
</html>